<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<style type="text/css">
	.container-box{
		height: 100vh;
	}
	.elementui-headerbox{
		position: relative;
		height: 10%;
		background-color: #666;
	}
	.leftbox,.rightbox{
		float: left;
		width: 50%;
		height: 90%;
	}
	.leftbox{
		background-color: #888;
	}
	.rightbox{
		background-color: #999;
	}
	.el-menu-demo{
		min-height: 100%;
	}
</style>



<div class="container-box">
	<div class="elementui-headerbox">
		<!-- 框架的组件文档 "https://element.eleme.cn/#/zh-CN/component/menu" -->
		<div id="app" style="overflow: hidden;height: 100%">
			<el-menu
			:default-active="activeIndex1"
			class="el-menu-demo"
			mode="horizontal"
			@select="handleSelect"
			background-color="#545c64"
			text-color="#fff"
			active-text-color="#ffd04b">
			<el-menu-item index="1" >处理中心</el-menu-item>
			<el-submenu index="2">
				<template slot="title">我的工作台</template>
				<el-menu-item index="2-1">选项1</el-menu-item>
				<el-menu-item index="2-2">选项2</el-menu-item>
				<el-menu-item index="2-3">选项3</el-menu-item>
				<el-submenu index="2-4">
					<template slot="title">选项4</template>
					<el-menu-item index="2-4-1">选项1</el-menu-item>
					<el-menu-item index="2-4-2">选项2</el-menu-item>
					<el-menu-item index="2-4-3">选项3</el-menu-item>
				</el-submenu>
			</el-submenu>
			<el-menu-item index="3" disabled>消息中心</el-menu-item>
			<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
		</el-menu>
	</div>
</div>


<!-- 左侧内容区域 -->
<div class="leftbox">


</div>


<!-- 右侧内容区域 -->
<div class="rightbox">


</div>
</div>

<script>
//组件初始化
var Main = {
	data() {
		return {
			activeIndex1: '1'
		};
	},
	methods: {
    	//点击事件
    	handleSelect(key, keyPath) {
    		console.log(key, keyPath);
        	//获取当前点击元素对象
        	console.log($('.el-menu-demo').children().eq(keyPath[0]-1).text());
    	}
	}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>